<template>
<div class="addperson">
    <div class="addform">
        <form @submit.prevent="addVuex()">
            <p>
                <input type="text" placeholder="请输入姓名" required v-model.lazy.trim="objF.uname" />
            </p>
            <aside>
                <input type="radio" value="0" name="gender" v-model="objF.gender" /><span>女</span>
                <input type="radio" value="1" name="gender" v-model="objF.gender" /><span>男</span>
            </aside>
            <p>
                <input type="number" min="18" max="70" placeholder="请输入年龄" v-model="objF.age" required/>
            </p>
            <p>
                <!-- 将v-model所获取到的value值转换成数字类型数据 -->
                <select required v-model.number="objF.port">
                    <option value="" disabled>--请选择职务--</option>
                    <option value="1">老板</option>
                    <option value="2">总经理</option>
                    <option value="3">部门主管</option>
                    <option value="4">组长</option>
                    <option value="5">员工</option>
                </select>
            </p>
            <p>
            <input type="number" min="2500" placeholder="请输入薪资" v-model.lazy.trim="objF.salary" required/>
            </p>
            <p>
            <input type="date" placeholder="请输入入职日期" v-model="objF.ctime" required/>
            </p>
            <article>
            <input type="submit" value="添加数据"/>
            </article>
        </form>
    </div>
</div>
</template>

<script>
// map方法：是Vue3对于vuex的快捷应用方式
import { mapMutations } from 'vuex';

export default {
  name:"AddPerson",
  data(){
    return{
        //整个表单对应的对象
        objF:{
            uname : '',
            gender : 0,
            age : 18,
            port : '',
            salary : 2500,
            ctime : ''
        }
    }
  },
  methods:{
    // ...    扩展运算符
    //利用扩展运算符，将mutations对象中的addlist属性提取出来用
    ...mapMutations(['addlist']),

    //创建表单提交事件的函数
    addVuex(){
        //验证选择的入职时间不得超过当天时间
        let nowtime = new Date().getTime();//当前系统时间戳
        let Ctime = new Date( this.objF.ctime ).getTime(); //日期选择器时间戳
        if(Ctime > nowtime){
            alert('录入的时间不得超过当天时间');
            return;
        }
        
        //将数据objF整个提交给vuex内部的函数处理
        this.addlist(this.objF)
        //传递数据后，返回查询页
        // this.$router.push('/home/listperson')
    }
  }
}
</script>

<style scoped>
 .addperson{
    width: 100%;
    height: 100%;
    position: relative;
 }
 .addperson .addform{
    width: 60%;
    overflow: hidden;
    box-shadow: 0px 0px 5px;
    border-radius: 8px;
    margin: 25px auto;
 }
 .addperson .addform p,.addperson .addform article{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 50px;
    margin-top: 25px;
 }
 .addperson .addform article input{
    width: 80%;
    height: 70%;
    margin-bottom: 25px;
 }
 .addperson .addform aside{
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
 }
 .addperson .addform aside span{
    margin-left: 6px;
    margin-right: 30px;
 } 
 .addperson .addform p input{
    width: 80%;
    height: 70%;
 }
 .addperson .addform p select{
    width: 80%;
    border-radius: 6px;
 }
</style>